<template>
  <div id="temp">
    <div class="stuInfo">
      <div class="tit">
        <span>学员详情</span>
        <span class="icon" @click="dialogFormVisible1=true"></span>
        <!-- 修改学员详情 -->
        <div class="modification">
          <el-dialog title="" :visible.sync="dialogFormVisible1">
            <el-tabs v-model="activeName">
              <el-tab-pane label="BASIC" name="first">
                <el-form :model="form" :rules="rules" ref="form">
                  <el-row>
                    <el-col :span="8">
                      <div>
                        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                          <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="出生日期" :label-width="formLabelWidth">
                          <el-date-picker v-model="form.birth" type="date" placeholder="选择日期" :picker-options="birthOptions">
                          </el-date-picker>
                        </el-form-item>
                        <el-form-item label="船型" :label-width="formLabelWidth">
                          <el-select v-model="form.crewtype"  clearable filterable>
                            <el-option v-for="item in crewList" :key="item.id" :label="item.type" :value="item.id"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="QQ" :label-width="formLabelWidth">
                          <el-input v-model="form.qq"></el-input>
                        </el-form-item>
                        <el-form-item label="船东" :label-width="formLabelWidth">
                          <el-select v-model="form.chuandong"  filterable clearable>
                            <el-option v-for="item in chuandongList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="适任证书" :label-width="formLabelWidth">
                          <el-input v-model="form.certificate" ></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <el-form-item label="姓名（英文）" :label-width="formLabelWidth" prop="ename">
                          <el-input v-model="form.ename" ></el-input>
                        </el-form-item>
                        <el-form-item label="职务" :label-width="formLabelWidth">
                          <el-select v-model="form.zhiwu"  filterable clearable>
                            <el-option v-for="item in zhiwuList" :key="item.id" :label="item.name" :value="item.name"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="地址" :label-width="formLabelWidth">
                          <el-input v-model="form.address"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" :label-width="formLabelWidth">
                          <el-input v-model="form.email" ></el-input>
                        </el-form-item>
                        <el-form-item label="代理公司" :label-width="formLabelWidth">
                          <el-select v-model="form.daili"  filterable clearable>
                            <el-option v-for="item in dailiList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="适任证书有效期" :label-width="formLabelWidth">
                          <el-date-picker v-model="form.certificate_time" type="date" placeholder="选择日期">
                          </el-date-picker>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <el-form-item label="身份证号码" :label-width="formLabelWidth" prop="idcard">
                          <el-input v-model="form.idcard" @change="idcardChange"></el-input>
                        </el-form-item>
                        <el-form-item label="现职务海龄" :label-width="formLabelWidth">
                          <el-input v-model="form.agework"></el-input>
                        </el-form-item>
                        <el-form-item label="手机" :label-width="formLabelWidth">
                          <el-input v-model="form.tel" ></el-input>
                        </el-form-item>
                        <el-form-item label="微信" :label-width="formLabelWidth">
                          <el-input v-model="form.wx" ></el-input>
                        </el-form-item>
                        <el-form-item label="个人" :label-width="formLabelWidth">
                          <el-radio-group v-model="form.self">
                            <el-radio label="是">是</el-radio>
                            <el-radio label="否">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item label="签发地" :label-width="formLabelWidth">
                          <el-input v-model="form.certificate_place"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="REMARKS" name="second">
                <el-form>
                  <el-row>
                    <el-col :span="8">
                      <div>

                        <el-form-item label="国籍" :label-width="formLabelWidth">
                          <el-select v-model="form.country" filterable clearable @change="countryChange">
                            <el-option v-for="item in countryList.country" :key="item[0]" :label="item[1]" :value="item[1]">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="户籍所在地" :label-width="formLabelWidth">
                          <el-select v-model="form.province" filterable clearable :disabled="form.country != '中国'">
                            <el-option v-for="item in countryList.province" :key="item.ProID" :label="item.name" :value="item.name">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="模拟器评估" :label-width="formLabelWidth">
                          <el-radio-group v-model="form.simulator">
                            <el-radio label="是">是</el-radio>
                            <el-radio label="否">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <el-form-item label="SIB" :label-width="formLabelWidth" prop="sib">
                          <el-input v-model="form.sib"></el-input>
                        </el-form-item>
                        <el-form-item label="学历" :label-width="formLabelWidth">
                          <el-select v-model="form.education" clearable placeholder="请选择">
                            <el-option label="中专" value="中专"></el-option>
                            <el-option label="大专" value="大专"></el-option>
                            <el-option label="本科及以上" value="本科及以上"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="是否有沟通" :label-width="formLabelWidth">
                          <el-radio-group v-model="form.talk">
                            <el-radio label="是">是</el-radio>
                            <el-radio label="否">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div>
                        <el-form-item label="性别" :label-width="formLabelWidth">
                          <el-radio-group v-model="form.sex">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="外派类型" :label-width="formLabelWidth">
                          <el-select v-model="form.type" placeholder="请选择" clearable>
                            <el-option label="套派" value="套派"></el-option>
                            <el-option label="混派" value="混派"></el-option>
                            <el-option label="单派" value="单派"></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="traineeEditSubmit">提 交</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <el-row>
        <el-col :span="7">
          <div>
            <el-col :span="10">
              <span class="left">姓名：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.name}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">出生日期：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.birth}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">船型：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.crewtype_name}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">QQ：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.qq}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">船东：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.chuandong_name}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left bd-bt">适任证书：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.certificate}}</span>
            </el-col>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <el-col :span="10">
              <span class="left">姓名（英文）：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.ename}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">职务：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.zhiwu}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">地址：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.address}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">邮箱：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.email}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">代理公司：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.daili_name}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left bd-bt">有效期：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.certificate_time}}</span>
            </el-col>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <el-col :span="10">
              <span class="left">身份证号码：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.idcard}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">现职务海龄：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.agework}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">手机：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.tel}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">微信：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.wx}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left">个人：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.self}}</span>
            </el-col>
          </div>
          <div>
            <el-col :span="10">
              <span class="left bd-bt">签发地：</span>
            </el-col>
            <el-col :span="14">
              <span class="right">{{info.certificate_place}}</span>
            </el-col>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="headPic">
            <el-upload
              class="avatar-uploader"
              :action="uploadAction"
              :data = "{id: id}"
              :show-file-list="false"
              :on-progress = "handleAvatarUpload"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <img v-else src="../../img/default.png" class="avatar">
            </el-upload>
          </div>
        </el-col>
      </el-row>
      <div class="remarks">
        <span class="icon icon1" v-show="flag" @click="isShow"></span>
        <span class="icon icon2" v-show="!flag" @click="isShow"></span>
        <span>REMARKS</span>
      </div>
      <div class="showBox" ref="showBox">
        <el-row>
          <el-col :span="7">

            <div>
              <el-col :span="10">
                <span class="left">国籍：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.country}}</span>
              </el-col>
            </div>
            <div>
              <el-col :span="10">
                <span class="left">户籍所在地：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.province}}</span>
              </el-col>
            </div>
            <div>
              <el-col :span="10">
                <span class="left">是否做过模拟器评估：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.simulator}}</span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="7">

            <div>
              <el-col :span="10">
                <span class="left">SIB：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.sib}}</span>
              </el-col>
            </div>
            <div>
              <el-col :span="10">
                <span class="left">是否有沟通：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.talk}}</span>
              </el-col>
            </div>
            <div>
              <el-col :span="10">
                <span class="left bd-bt">外派类型：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.type}}</span>
              </el-col>
            </div>
          </el-col>
          <el-col :span="7">
            <div>
              <el-col :span="10">
                <span class="left">性别：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.sex}}</span>
              </el-col>
            </div>
            <div>
              <el-col :span="10">
                <span class="left">学历：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.education}}</span>
              </el-col>
            </div>
            <div>
              <!-- <el-col :span="10">
                <span class="left bd-bt">外派类型：</span>
              </el-col>
              <el-col :span="14">
                <span class="right">{{info.type}}</span>
              </el-col> -->
            </div>
          </el-col>
          <el-col :span="3">
            <div></div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="record">
      <el-tabs type="border-card" @tab-click="formChange" active-name="traineeTraining">
        <el-tab-pane label="培训记录" name="traineeTraining">
          <table class="tab-table">
            <thead>
            <tr>
              <th>序号</th>
              <th>课程名称</th>
              <th>开班日期</th>
              <th>报班状态</th>
              <th>证书编号</th>
              <th>培训费(元)</th>
              <th>付费方</th>
              <th>VIP积分</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in list" :key="item.id">
              <td>{{index+1}}</td>
              <td style="color: rgb(0,158,255);cursor: pointer;" @click="trainingDetail(item.id)">{{item.name}}</td>
              <td>{{item.startdate}}</td>
              <td>{{item.state}}</td>
              <td>{{item.certificate}}</td>
              <td>{{item.tuition}}</td>
              <td>{{item.payer?item.payer:'个人'}}</td>
              <td>{{item.tuition}}</td>
            </tr>


            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="服务记录" name="traineeService">
          <table class="tab-table">
            <thead>
            <tr>
              <th>
                <span class="icon add" @click="openAddService"></span>
              </th>
              <th>序号</th>
              <th>职务</th>
              <th>船名</th>
              <th>船型</th>
              <th>类型</th>
              <th>日期</th>
              <th>时长（月）</th>
              <th>船吨位</th>
              <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in list" :key="item.id">
              <td>
                <span class="icon edit" @click="editService(item.id)"></span>
                <span class="icon del" @click="delService(item.id)"></span>
              </td>
              <td>{{index+1}}</td>
              <td>{{item.zhiwu}}</td>
              <td>{{item.shipname}}</td>
              <td>{{item.vessel_type}}</td>
              <td>{{item.type}}</td>
              <td>{{item.startdate}}</td>
              <td>{{item.time}}</td>
              <td>{{item.dunwei}}</td>
              <td>{{item.note}}</td>
            </tr>

            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="意向课程" name="traineeIntent">
          <table class="tab-table">
            <thead>
            <tr>
              <th>
                <span class="icon add" @click="openAddIntent"></span>
              </th>
              <th>序号</th>
              <th>课程名称</th>
              <th>登记日期</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in list" :key="item.id">
              <td>
                <span class="icon edit" @click="editIntent(item.id)"></span>
                <span class="icon del" @click="delIntent(item.id)"></span>
              </td>
              <td>{{index+1}}</td>
              <td>{{item.course}}</td>
              <td>{{item.date}}</td>
            </tr>
            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="课前课后测评" name="evaluation">
          <div class="btnBox">
            <el-button style="margin-right:10px;" type="primary" size="small" v-for="item in btnList" @click="changeChart(item.traineeid,item.trainingid)" :key="item.traineeid">{{item.name}}</el-button>
          </div>
          <div id="myChart1" style="width:600px;height:400px;margin:0 auto"></div>
        </el-tab-pane>
        <el-tab-pane label="适任能力测评" name="competency" >
          <div style="display:flex;justify-content: space-around;margin-top: 50px;">
            <div id="myChart2" style="width:550px;height:400px;"></div>
            <div id="myChart3" style="width:550px;height:400px;"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="信息修改记录" name="traineeChange">
          <table class="tab-table">
            <thead>
            <tr>
              <th>序号</th>
              <th>编辑人</th>
              <th>编辑项目</th>
              <th>编辑日期</th>
              <th>编辑前</th>
              <th>编辑后</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.username}}</td>
              <td>{{item.change}}</td>
              <td>{{item.time}}</td>
              <td>{{item.before}}</td>
              <td>{{item.after}}</td>
            </tr>

            </tbody>
          </table>
        </el-tab-pane>
        <el-tab-pane label="备注" name="traineeNote">
          <table class="tab-table">
            <thead>
            <tr>
              <th>
                <span class="icon add" @click="openAddNote"></span>
              </th>
              <th>序号</th>
              <th>操作人</th>
              <th>备注日期</th>
              <th>备注内容</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in list" :key="item.id">
              <td>
                <span class="icon edit" @click="editNote(item.id)"></span>
                <span class="icon del" @click="delNote(item.id)"></span>
              </td>
              <td>{{index+1}}</td>
              <td>{{item.username}}</td>
              <td>{{item.date}}</td>
              <td>{{item.note}}</td>
            </tr>
            </tbody>
          </table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表单弹框 -->
    <div class="addList">
      <el-dialog title="服务记录" :visible.sync="addService" size="tiny">
        <el-form :model="serviceForm" :rules="serviceRules" ref="serviceForm" label-width="120px">
          <el-form-item label="职务" prop="zhiwu">
            <el-select v-model="serviceForm.zhiwu" placeholder="请选择" clearable filterable>
              <el-option v-for="item in zhiwuList" :key="item.id" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="船名" prop="shipname">
            <el-input v-model="serviceForm.shipname"></el-input>
          </el-form-item>
          <el-form-item label="船型" prop="vessel_type">
            <el-select v-model="serviceForm.vessel_type" placeholder="请选择" clearable filterable>
              <el-option v-for="item in crewList" :key="item.id" :label="item.type" :value="item.type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配员类型" prop="type">
            <el-select v-model="serviceForm.type" placeholder="请选择" clearable filterable>
              <el-option label="单派" value="单派"></el-option>
              <el-option label="混派" value="混派"></el-option>
              <el-option label="套派" value="套派"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期" prop="startdate">
            <el-date-picker v-model="serviceForm.startdate" type="date" >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期" prop="enddate">
            <el-date-picker v-model="serviceForm.enddate" type="date" >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="船吨位" prop="dunwei">
            <el-input v-model="serviceForm.dunwei" placeholder="单位吨"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <el-input type="textarea" :rows="5" v-model="serviceForm.note">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitService">提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog title="意向课程" :visible.sync="addIntent" size="tiny">
        <el-form :model="intentForm" :rules="intentRules" ref="intentForm" label-width="120px">
          <el-form-item label="课程名称" prop="course">
            <el-select v-model="intentForm.course" placeholder="请选择" size="small" filterable clearable>
              <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitIntent">提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog title="学员备注" :visible.sync="addNote" size="tiny">
        <el-form :model="noteForm" :rules="noteRules" ref="noteForm" label-width="120px">
          <el-form-item label="备注内容" prop="note">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="noteForm.note">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitNote">提 交</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import "../../assets/css/info.css";
import countryList from "../../assets/js/data";
const serviceForm = {
  id: 0,
  zhiwu: "", //职务
  shipname: "", //船名
  vessel_type: "",
  type: "",
  startdate: "", //开始日期
  enddate: "", //结束日期
  dunwei: "", //船吨位
  note: "" //备注
};
const intentForm = {
  id: 0,
  course: ""
};
const noteForm = {
  id: 0,
  note: ""
};

export default {
  data() {
    var validate = (rule, value, callback) => {
      if (value === "" && this.form.idcard === "") {
        callback(new Error("身份证号与海员号至少填一项"));
      } else {
        callback();
      }
    };
    var validate1 = (rule, value, callback) => {
      if (value === "" && this.form.name === "") {
        callback(new Error("中文姓名与英文姓名至少填一项"));
      } else {
        callback();
      }
    };
    var idcard_validate = (rule, value, callback) => {
      if (value != "") {
        let patt = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        if (!patt.test(value)) {
          callback(new Error("请输入正确的身份证号码"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      birthOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      countryList: countryList,
      activeName: "first",
      btnList: {},
      form: {
        id: "",
        name: "",
        ename: "",
        idcard: "",
        birth: "",
        zhiwu: "",
        agework: "",
        crewtype: "",
        address: "",
        tel: "",
        qq: "",
        email: "",
        wx: "",
        chuandong: "",
        daili: "",
        self: "",
        certificate: "",
        certificate_time: "",
        certificate_place: "",
        sex: "",
        country: "",
        sib: "",
        education: "",
        province: "",
        talk: "",
        type: "",
        simulator: ""
      },
      rules: {
        idcard: [{ validator: idcard_validate, trigger: "blur" }],
        sib: [{ validator: validate, trigger: "blur" }],
        ename: [{ validator: validate1, trigger: "blur" }]
      },
      tabLabel: "培训记录",
      flag: true,
      dialogFormVisible1: false,
      //表单弹框
      dialogFormVisible2: false,
      addService: false,
      serviceForm: _g.cloneJson(serviceForm),
      serviceRules: {
        zhiwu: [{ required: true, message: "请选择职务", trigger: "change" }],
        shipname: [{ required: true, message: "请输入船名", trigger: "blur" }]
      },
      addIntent: false,
      intentForm: _g.cloneJson(intentForm),
      intentRules: {
        course: [
          {
            type: "number",
            required: true,
            message: "请选择课程",
            trigger: "change"
          }
        ]
      },
      courseList: [],
      addNote: false,
      noteForm: _g.cloneJson(noteForm),
      noteRules: {
        note: [{ required: true, message: "请填写备注内容", trigger: "blur" }]
      },

      formLabelWidth: "120px",
      //图片上传地址
      imageUrl: "",
      id: "",
      info: {},
      list: [],
      zhiwuList: [],
      chuandongList: [],
      dailiList: [],
      crewList: [],
      myChart1: {},
      myChart2: {},
      myChart3: {},
      option: {
        title: {
          text: ""
        },
        // tooltip: {},
        toolbox: {
          show: true,
          right: 20,
          feature: {
            saveAsImage: {
              //保存图片
              show: true
            }
          }
        },
        legend: {
          data: ['课前测评', '课后测评']
        },
        radar: {
          name: {
            // formatter: text => {
            //   text = text.replace(/\S{15}/g, function(match) {
            //     return match + "\n";
            //   });
            //   return text;
            // },
            formatter:function(value)  
              {  
                var ret = "";//拼接加\n返回的类目项  
                var maxLength = 20;//每项显示文字个数  
                var valLength = value.length;//X轴类目项的文字个数  
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                if (rowN > 1)//如果类目项的文字大于3,  
                {  
                    for (var i = 0; i < rowN; i++) {  
                        var temp = "";//每次截取的字符串  
                        var start = i * maxLength;//开始截取的位置  
                        var end = start + maxLength;//结束截取的位置  
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                        temp = value.substring(start, end) + "\n";  
                        ret += temp; //凭借最终的字符串  
                    }  
                    return ret;  
                }  
                else {  
                    return value;  
                }  
              },
            textStyle: {
              color: "#333"
            }
          },
          indicator: []
        },
        series: [
          {
            name: "客户反馈",
            type: "radar",
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return params.value;
                }
              }
            },
            data: []
          }
        ]
      },
      
      uploadAction: PATH + "trainee/traineeEdit"
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.fetchData();
    this.traineeTraining();
    this.getZhiwuList();
    this.getCourseList();
    this.getChuandongList();
    this.getDailiList();
    this.getCrewList();
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    getZhiwuList() {
      this.apiPost("System/zhiwuLists").then(res => {
        this.zhiwuList = res;
      });
    },
    getCourseList() {
      this.apiPost("System/courseLists").then(res => {
        this.courseList = res;
      });
    },
    getChuandongList() {
      this.apiPost("System/chuandongLists").then(res => {
        this.chuandongList = res;
      });
    },
    getDailiList() {
      this.apiPost("System/dailiLists").then(res => {
        this.dailiList = res;
      });
    },
    getCrewList() {
      this.apiPost("System/crewLists").then(res => {
        this.crewList = res;
      });
    },
    //REMARKS显示隐藏
    isShow() {
      this.flag = !this.flag;
      if (this.flag) {
        this.$refs.showBox.style.height = 0;
      } else {
        this.$refs.showBox.style.height = 120 + "px";
      }
    },

    idcardChange(val){
      let patt = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (patt.test(val)) {
        this.form.country = '中国'
        this.form.province = _g.getProvince(val.substring(0,2))
        this.form.birth = new Date(val.substring(6,10)+'/'+val.substring(10,12)+'/'+val.substring(12,14))
        this.form.sex = val.substring(16,17)%2 == 0?'女':'男'
      }
    },

    //删除提示框
    open2() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleAvatarUpload() {
      _g.openGlobalLoading();
    },
    //图片上传
    handleAvatarSuccess(res, file) {
      _g.closeGlobalLoading();
      let remind = res.error ? "error" : "success";
      _g.toastMsg(remind, res.msg);
      if (!res.error) {
        this.imageUrl = res.url;
      }
    },
    fetchData() {
      let data = {
        id: this.id
      };
      this.apiPost("Trainee/traineeDetail", data).then(res => {
        this.info = res;
        this.imageUrl = res.photo;
        for (let k in this.form) {
          this.form[k] = res[k];
        }
      });
    },
    countryChange(value) {
      if (value != "中国") {
        this.form.province = "";
      }
    },
    traineeTraining() {
      let data = {
        id: this.id
      };
      this.apiPost("Trainee/traineeTraining", data).then(res => {
        this.list = res;
      });
    },
    traineeService() {
      let data = {
        id: this.id
      };
      this.apiPost("Trainee/traineeService", data).then(res => {
        this.list = res;
      });
    },
    traineeIntent() {
      let data = {
        id: this.id
      };
      this.apiPost("Trainee/traineeIntent", data).then(res => {
        this.list = res;
      });
    },
    traineeNote() {
      let data = {
        id: this.id
      };
      this.apiPost("Trainee/traineeNote", data).then(res => {
        this.list = res;
      });
    },
    traineeChange() {
      let data = {
        id: this.id
      };
      this.apiPost("Trainee/traineeChange", data).then(res => {
        this.list = res;
      });
    },
    //标签页切换
    formChange(tab) {
      this.tabLabel = tab.label;
      if (tab.name == "evaluation") {
        this.myChart1.showLoading("default", {
          color: "#0177BF"
        });
        let data = {
          id: this.id
        };
        this.apiPost("Trainee/traineeAllTraining", data).then(res => {
          this.btnList = res;
          if (res.length) {
            let data1 = {
              traineeid: res[0].traineeid,
              trainingid: res[0].trainingid
            };
            this.apiPost("Trainee/traineeTestResult", data1).then(res => {
              this.myChart1.hideLoading();
              this.myChart1.setOption({
                radar: {
                  indicator: res.indocator
                },
                series: [
                  {
                    data: res.data
                  }
                ]
              });
            });
          } else {
            _g.toastMsg("normal", "暂无数据");
            this.myChart1.hideLoading();
          }
        });
        return;
      } else if (tab.name == "competency") {
        this.myChart2.showLoading("default", {
          color: "#0177BF"
        });
        this.myChart3.showLoading("default", {
          color: "#0177BF"
        });
        let data = {
          trainee_id: this.id
        };
        this.apiPost("Trainee/TraineeCompetency", data).then(res => {
          this.myChart2.hideLoading();
          this.myChart3.hideLoading();
          this.myChart2.setOption({
            radar: {
              indicator: res.indicator
            },
            series: [
              {
                data: res.data
              }
            ]
          });
          this.myChart3.setOption({
            radar: {
              indicator: res.indicator1
            },
            series: [
              {
                data: res.data1
              }
            ]
          });
        });
        return;
      }
      let data = {
        id: this.id
      };
      this.apiPost("Trainee/" + tab.name, data).then(res => {
        this.list = res;
      });
    },
    openAddService() {
      this.addService = true;
      setTimeout(() => {
        this.$refs.serviceForm.resetFields();
        this.serviceForm = _g.cloneJson(serviceForm);
      }, 0);
    },
    submitService() {
      this.$refs.serviceForm.validate(valid => {
        if (valid) {
          this.addService = false;
          let data = this.serviceForm;
          data.traineeid = this.id;
          this.apiPost("Trainee/traineeServiceEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.traineeService();
              this.$refs.serviceForm.resetFields();
              this.serviceForm = _g.cloneJson(serviceForm);
            } else {
              this.addService = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    editService(id) {
      let data = {
        id: id
      };
      this.apiPost("Trainee/traineeServiceDetail", data).then(res => {
        this.addService = true;
        setTimeout(() => {
          this.$refs.serviceForm.resetFields();
          this.serviceForm = res;
        }, 0);
      });
    },
    delService(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Trainee/traineeServiceDelete", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.traineeService();
            }
          });
        })
        .catch(() => {});
    },
    openAddIntent() {
      this.addIntent = true;
      setTimeout(() => {
        this.$refs.intentForm.resetFields();
        this.intentForm = _g.cloneJson(intentForm);
      }, 0);
    },
    submitIntent() {
      this.$refs.intentForm.validate(valid => {
        if (valid) {
          this.addIntent = false;
          let data = this.intentForm;
          data.traineeid = this.id;
          this.apiPost("Trainee/traineeIntentEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.traineeIntent();
              this.$refs.intentForm.resetFields();
              this.intentForm = _g.cloneJson(intentForm);
            } else {
              this.addIntent = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    editIntent(id) {
      let data = {
        id: id
      };
      this.apiPost("Trainee/traineeIntentDetail", data).then(res => {
        this.intentForm = res;
        this.addIntent = true;
      });
    },
    delIntent(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Trainee/traineeIntentDelete", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.traineeIntent();
            }
          });
        })
        .catch(() => {});
    },
    openAddNote() {
      this.addNote = true;

      setTimeout(() => {
        this.$refs.noteForm.resetFields();
        this.noteForm = _g.cloneJson(noteForm);
      }, 0);
    },
    submitNote() {
      this.$refs.noteForm.validate(valid => {
        if (valid) {
          this.addNote = false;
          let data = this.noteForm;
          data.traineeid = this.id;
          this.apiPost("Trainee/traineeNoteEdit", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.traineeNote();
              this.$refs.noteForm.resetFields();
              this.noteForm = _g.cloneJson(noteForm);
            } else {
              this.addNote = true;
            }
          });
        } else {
          return false;
        }
      });
    },
    editNote(id) {
      let data = {
        id: id
      };
      this.apiPost("Trainee/traineeNoteDetail", data).then(res => {
        this.noteForm = res;
        this.addNote = true;
      });
    },
    delNote(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            id: id
          };
          this.apiPost("Trainee/traineeNoteDelete", data).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.traineeNote();
            }
          });
        })
        .catch(() => {});
    },
    traineeEditSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.dialogFormVisible1 = false;
          this.apiPost("trainee/traineeEdit", this.form).then(res => {
            let remind = res.error ? "error" : "success";
            _g.toastMsg(remind, res.msg);
            if (!res.error) {
              this.fetchData();
              if (this.tabLabel == "信息修改记录") {
                this.traineeChange();
              }
            } else {
              this.dialogFormVisible1 = true;
            }
          });
        } else {
          //console.log('error submit!!');
        }
      });
    },
    drawChart() {
      this.myChart1 = this.$echarts.init(document.querySelector("#myChart1"));
      this.myChart1.setOption(this.option);
      this.myChart2 = this.$echarts.init(document.querySelector("#myChart2"));
      this.myChart2.setOption(this.option);
      this.myChart3 = this.$echarts.init(document.querySelector("#myChart3"));
      this.myChart3.setOption(this.option);
    },
    changeChart(traineeid, trainingid) {
      this.myChart1.showLoading("default", {
        color: "#0177BF"
      });
      let data = {
        traineeid: traineeid,
        trainingid: trainingid
      };
      this.apiPost("Trainee/traineeTestResult", data).then(res => {
        this.myChart1.hideLoading();
        this.myChart1.setOption({
          radar: {
            indicator: res.indocator
          },
          series: [
            {
              data: res.data
            }
          ]
        });
      });
    },
    trainingDetail(id){
      router.push('/training/listDetail/'+id);
    }
  }
};
</script>
<style lang="css" scoped>
.btnBox {
  margin: 20px 0;
  text-align: center;
}
</style>
